<template>
  <Drawer v-model:visible="visible" :title="title" width="100%" :destroyOnClose="true" placement="right">
    <div class="md:my-5">
      <Card>
        <BasicForm ref="basicFormRef" @rule="ruleChangeHandler" @submit="addBasicParam"></BasicForm>
        <div v-if="isThreshold === true">
          <ThresholdForm ref="thresholdFormRef" @submit="addRuleParam"></ThresholdForm>
        </div>
        <div v-if="isThreshold === false">
          <EventForm ref="eventFormRef" @submit="addRuleParam"></EventForm>
        </div>
        <div v-if="isThreshold !== null">
          <NotificationForm ref="notificationFormRef" @submit="addNotificationParam"></NotificationForm>
        </div>
      </Card>
    </div>

    <div class="absolute bottom-10 right-8">
      <Button style="margin-right: 8px; font-weight: bolder" @click="closeDrawer">取消</Button>
      <Button type="primary" style="font-weight: bolder" @click="submitHandler">确定</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
import { Drawer, Button, message } from 'ant-design-vue';
import { nextTick, ref } from 'vue';
import { Card } from 'ant-design-vue';
import { createCesRule, updateCesRule, viewCesRuleDetail } from '/@/api/maintenance-center/alarm/alarm';
import BasicForm from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/BasicForm.vue';
import ThresholdForm from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/ThresholdForm.vue';
import EventForm from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/EventForm.vue';
import NotificationForm from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/NotificationForm.vue';
import { CesDetail, CesDetailParams } from '/@/api/maintenance-center/alarm/model/alarmModel';

const emit = defineEmits('success');
const visible = ref<boolean>(false);
const title = ref('');

const isThreshold = ref(null);
const basicFormRef = ref();
const thresholdFormRef = ref();
const eventFormRef = ref();
const notificationFormRef = ref();
const params = ref({});
let result: CesDetail = {};

function ruleChangeHandler(params: any) {
  if (params === 'THRESHOLD') {
    isThreshold.value = true;
  } else {
    isThreshold.value = false;
  }
}

const showDrawer = async (record: Recordable, type: string) => {
  if (type === 'create') {
    title.value = '创建CES告警规则';
    isThreshold.value = null;
    visible.value = true;
  } else if (type === 'edit') {
    title.value = '编辑CES告警规则';
    let params: CesDetailParams = {
      alarmId: record.alarmId,
    };
    isThreshold.value = null;
    visible.value = true;
    result = await viewCesRuleDetail(params);
    let temp = { ...result };
    basicFormRef.value.setFormValue(temp);
    if (result.ruleType === 'THRESHOLD') {
      isThreshold.value = true;
      nextTick(() => {
        notificationFormRef.value.setFormValue(temp);
        thresholdFormRef.value.setFormValue(temp);
      });
    } else {
      isThreshold.value = false;
      nextTick(() => {
        notificationFormRef.value.setFormValue(temp);
        eventFormRef.value.setFormValue(temp);
      });
    }
  }
};
const closeDrawer = () => {
  isThreshold.value = null;
  params.value = {};
  visible.value = false;
};

async function addBasicParam(record: Recordable) {
  params.value = await Object.assign(params.value, record.value);
  if (isThreshold.value) {
    thresholdFormRef.value.handleSubmit();
  } else {
    eventFormRef.value.handleSubmit();
  }
}

async function addRuleParam(record: Recordable) {
  params.value = Object.assign(params.value, record.value);
  notificationFormRef.value.handleSubmit();
}

async function addNotificationParam(record: Recordable) {
  params.value = Object.assign(params.value, record.value);
  let res;
  if (title.value === '编辑CES告警规则') {
    res = await updateCesRule(params.value);
  } else {
    res = await createCesRule(params.value);
  }
  message.info(res);
  emit('success');
  await closeDrawer();
}

const submitHandler = async () => {
  basicFormRef.value.handleSubmit();
};

defineExpose({ showDrawer });
</script>
